<template>
  <div class="project">
    <HistoryData v-if="isHistory" @handleBack="handleBack"></HistoryData>
    <div class="project-push" v-else>
      <div class="push-top">
        <div v-for="(item, index) in topData" :key="index" class="top-item" :style="setBgColorTop(item.name,'bg')">
          <div class="left">
            <img :src="setBgColorTop(item.name,'img')" alt="img" />
          </div>
          <div>
            <span style="font-size: 18px;">{{ item.name }}</span>
            <span :style="setBgColorTop(item.name,'color')" class="num">{{
              item.projectCount
            }}</span>
            <span>个</span>
          </div>
        </div>
      </div>
      <div class="center-btn" v-if="$store.state.isMunicipalBureau">
        <span>
          <el-button type="primary" icon="el-icon-download" size="small" @click="modelDownload">模版下载</el-button>
          <el-button type="warning" icon="el-icon-bottom" size="small" @click="switchDataLoad">数据导入</el-button>
        </span>
        <span>
          <el-button type="info" icon="el-icon-time" size="small" @click="goHistory">历史数据</el-button>
          <el-button type="danger" icon="el-icon-upload2" size="small" @click="dateOutput">数据导出</el-button>
        </span>
      </div>
      <div class="center-btn-right" v-else>
        <el-button type="primary" icon="el-icon-download" size="small" @click="deliveryFormDownload">交办单下载
        </el-button>
      </div>
      <div class="table-content" ref="tableRef">
        <el-table v-loading="loading" :data="tableData" stripe size="small" style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
          :height="tableHeight" :header-cell-style="headerRowStyle">
          <el-table-column type="index" label="序号" align="center" width="50">
          </el-table-column>
          <el-table-column prop="industryType" align="center" label="产业类型" width="90">
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" align="center" width="90">
          </el-table-column>
          <el-table-column prop="projectBody" label="项目主体" align="center" width="90">
          </el-table-column>
          <el-table-column prop="companyProfile" label="公司简介" align="center" width="55">
          </el-table-column>
          <el-table-column prop="intentionallyLoaded" label="意向承载地" align="center" width="60">
          </el-table-column>
          <el-table-column prop="totalMoney" label="总投资额(亿元)" align="center" width="80">
          </el-table-column>
          <el-table-column prop="projectLand" label="项目用地(亩)" width="80" align="center">
          </el-table-column>
          <el-table-column prop="constuctionContent" label="建设内容" align="center">
          </el-table-column>
          <el-table-column prop="projectStatement" label="项目诉求" align="center" width="100">
          </el-table-column>
          <el-table-column prop="expectedBenefit" label="预期效益" align="center" width="100">
          </el-table-column>
          <el-table-column prop="landedCase" label="已落地案例" width="60" align="center">
          </el-table-column>
          <el-table-column prop="projectPerson" label="项目联系人" width="60" align="center">
          </el-table-column>
          <el-table-column prop="distributionSituation" label="分发情况" align="center" width="55">
          </el-table-column>
          <el-table-column prop="district14" label="操作" align="center" width="100" v-if="$store.state.isMunicipalBureau">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="onDispatch(scope.row)" style="margin-bottom: 5px">分发
              </el-button>
              <el-button type="danger" size="mini" @click="onStopEnd(scope.row)">暂停或终止
              </el-button>
              <!-- <el-popover placement="top-start" width="280" trigger="click">
                <el-radio-group v-model="stopEnd" size="small">
                  <el-radio label="1" border style="margin-right: 0px"
                    >暂停</el-radio
                  >
                  <el-radio label="2" border>终止</el-radio>
                </el-radio-group>
                <el-button
                  type="primary"
                  size="medium"
                  style="margin-left: 25px"
                  @click="onStopEnd"
                  >确定</el-button
                >
                <el-button type="danger" size="mini" slot="reference"
                  >暂停或终止
                </el-button>
              </el-popover> -->
            </template>
          </el-table-column>
          <el-table-column prop="district14" label="操作" align="center" width="100" v-else>
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="wanderAbout(scope.row)" style="margin-bottom: 5px">流转
              </el-button>
              <el-button type="danger" size="mini" @click="switchBackReason(scope.row)">退回
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="projectAttachments" label="项目附件" align="center" width="160">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-upload2" @click="uploadFile(scope.row)" size="mini">上传附件
              </el-button>
              <!-- <div style="display: flex;align-items: center">
                <img style="width: 16px" :src="pdfImg" alt="img"/>
                <span style="padding: 0 5px">file.pdf</span>
                <i class="el-icon-download"></i>
              </div>
              <div style="display: flex;align-items: center">
                <img style="width: 16px" :src="excelImg" alt="img"/>
                <span style="padding: 0 5px">file.excel</span>
                <i class="el-icon-download"></i>
              </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="projectStatus" label="项目进展" align="center" width="100" v-if="$store.state.isMunicipalBureau">
            <template slot-scope="scope">
              <div class="status" :style="setBgColor(scope.row)"></div>
            </template>
          </el-table-column>
          <el-table-column prop="tixing" label="提醒" align="center" width="100" v-if="!$store.state.isMunicipalBureau">
            <template slot-scope="scope">
              <div v-if="scope.row.tixing === 'warn'" class="tixing" style="background: #d81e06">
                !
              </div>
              <div v-else class="tixing" style="background: #0058f1">NEW</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-bottom-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" background layout="prev, pager, next, jumper" :total="total">
          </el-pagination>
          <div class="right-tip" v-if="$store.state.isMunicipalBureau">
            <span style="font-weight: bold; padding-right: 10px">项目进展状态:</span>
            <div class="right-tip-items">
              <div v-for="item in tags" :key="item.name" class="item">
                <span :style="{ background: item.color }" class="circle"></span>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="项目分发" :visible.sync="disVisible" width="760px" center>
      <div class="dialog-body">
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in checkData" :label="item.value" :key="item.value"></el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="onDisConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <fileUpload :visible="showFileUpload" curType="项目" @close="updateFileData"></fileUpload>
    <backModel :visible="showBackReason" @close="switchBackReason" @returnBack="returnBack"></backModel>
  </div>
</template>

<script>
import bImg1 from "@img/project/icon-xmsl.png";
import bImg2 from "@img/project/icon-tsxm.png";
import bImg3 from "@img/project/icon-jsxm.png";
import bImg4 from "@img/project/thxm.png";
import pdfImg from "@img/project/icon-pdf.png";
import excelImg from "@img/project/icon-excel.png";
import HistoryData from "./historyData.vue";
import fileUpload from "./common/fileUpload.vue";
import backModel from "./common/backModel.vue";
import {
  projectPushList,
  projectPushTotal,
  projectPushDistribute,
  projectPushBack,
  fileModelDownload,
  dataExport,
  projectPushUpdate,
  projectPushWanderAbout,
  projectPushPause,
} from "@api/projectManaApi";
import { options_district } from "./common/optionConfig";
import downFile from "@api/projectManaApi/download";

export default {
  name: "projectPush",
  components: { HistoryData, fileUpload, backModel },
  data() {
    return {
      topData: [],
      tableData: [],
      tableHeight: document.body.clientHeight - 430,
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10, // 每页
      pageNum: 0, // 当前
      tags: [
        {
          name: "已分发",
          color: "#06BF00",
        },
        {
          name: "接收",
          color: "#F9C700",
        },
        {
          name: "退回",
          color: "#FF1E1E",
        },
      ],
      tableRef: null,
      pdfImg: pdfImg,
      excelImg: excelImg,
      isHistory: false,
      disVisible: false,
      checkData: options_district,
      checkList: [],
      record: {},
      showFileUpload: false,
      showBackReason: false,
      stopEnd: "",
    };
  },
  created() {
    console.log(
      "区分市局与县区===》项目推送",
      this.$store.state.isMunicipalBureau
    );
  },
  mounted() {
    this.initSize();
    this.initData();
    this.totalData();
    window.addEventListener("resize", this.initSize);
  },
  methods: {
    setBgColorTop(name, type) {
      if (type === 'bg') {
        if (name === "项目数量") {
          return {
            background: "#FEE8E5"
          };
        }
        if (name === "流转项目") {
          return {
            background: "#F2F5FE"
          };
        }
        if (name === "退回项目") {
          return {
            background: "#F6EEFF"
          };
        }
        if (name === "推送项目") {
          return {
            background: "#EBF9F7"
          };
        }
        if (name === "接收项目") {
          return {
            background: "#F2F5FE"
          };
        }
      }
      if (type === 'color') {
        if (name === "项目数量") {
          return {
            color: "#FF2300"
          };
        }
        if (name === "流转项目") {
          return {
            color: "#1F4CED"
          };
        }
        if (name === "退回项目") {
          return {
            color: "#9B44FE"
          };
        }
        if (name === "推送项目") {
          return {
            color: "#1F4CED"
          };
        }
        if (name === "接收项目") {
          return {
            color: "#1F4CED"
          };
        }
      }
      if (type === 'img') {
        if (name === "项目数量") {
          return bImg1;
        }
        if (name === "流转项目") {
          return bImg3;
        }
        if (name === "退回项目") {
          return bImg4;
        }
        if (name === "推送项目") {
          return bImg2;
        }
        if (name === "接收项目") {
          return bImg3;
        }
      }
    },
    setBgColor(row) {
      if (row.projectStatus === "已分发") {
        return {
          background: "#06BF00",
        };
      }
      if (row.projectStatus === "接收") {
        return {
          background: "#F9C700",
        };
      }
      if (row.projectStatus === "退回") {
        return {
          background: "#FF1E1E",
        };
      }
    },
    // 暂停或终止
    onStopEnd(row) {
      console.log(row);
      this.$confirm("确定暂停或终止该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await projectPushPause(row.id);
          if (res.code === 200) {
            this.initData();
            return res.success
              ? this.$message.success(res.msg)
              : this.$message.error(res.msg);
          } else {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    switchBackReason(row) {
      this.record = row;
      this.showBackReason = !this.showBackReason;
    },
    async updateFileData(fileName) {
      if (fileName) {
        const params = {
          id: this.record.id,
          projectAttachments: fileName,
        };
        const res = await projectPushUpdate(params);
        if (res.code === 200) {
          this.initData();
        }
      }
      this.showFileUpload = !this.showFileUpload;
      this.record = null;
    },
    // 上传附件
    uploadFile(row) {
      this.record = row;
      this.showFileUpload = !this.showFileUpload;
    },
    // 退回
    async returnBack(value) {
      const params = {
        id: this.record.id,
        fallbackReason: value,
        city: this.$store.state.curSection,
      };
      const res = await projectPushBack(params);
      if (res.code === 200) {
        this.showBackReason = false;
        this.initData();
        return res.success
          ? this.$message.success(res.msg)
          : this.$message.error(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 流转
    wanderAbout(row) {
      this.$confirm("确定流转该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await projectPushWanderAbout(row.id);
          if (res.code === 200) {
            this.initData();
            return res.success
              ? this.$message.success(res.msg)
              : this.$message.error(res.msg);
          } else {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 模板下载
    async modelDownload() {
      const res = await fileModelDownload();
      if (res.size === 0) {
        return this.$message.warning("当前没有可供下载的文件");
      }
      downFile.excel(res, "项目推送模版");
      this.$message.success("下载成功");
    },
    // 交办单下载
    async deliveryFormDownload() {
      const res = await fileModelDownload();
      if (res.size === 0) {
        return this.$message.warning("当前没有可供下载的文件");
      }
      downFile.excel(res, "交办单");
      this.$message.success("下载成功");
    },
    // 数据导入
    switchDataLoad() {
      this.showFileUpload = !this.showFileUpload;
    },
    // 数据导出
    async dateOutput() {
      const res = await dataExport();
      if (res.size === 0) {
        return this.$message.warning("当前没有可供下载的文件");
      }
      downFile.excel(res, "项目推送");
      this.$message.success("导出成功");
    },
    // 返回
    handleBack() {
      this.isHistory = false;
      this.initData()
    },
    // 表头
    headerRowStyle() {
      return "color: #1C1C28;background:#E5E5E5";
    },
    // 尺寸设置
    initSize() {
      const wHeight = document.body.clientHeight;
      this.tableHeight = wHeight - 430;
    },
    // table数据
    async initData() {
      this.loading = true;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      const res = await projectPushList(params);
      if (res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 统计数据
    async totalData() {
      const res = await projectPushTotal();
      console.log(res,'===')
      if (res && res.length > 0) {
        this.topData = res;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.initData();
    },
    // 点击分发
    onDispatch(row) {
      this.record = row;
      this.disVisible = true;
    },

    async onDisConfirm() {
      if (!this.record.id) return;
      const data = {
        id: this.record.id,
        citys: this.checkList.join(","),
      };
      const res = await projectPushDistribute(data);
      if (res.code === 200) {
        this.disVisible = false;
      }
    },
    // 点击历史数据
    goHistory() {
      this.isHistory = true;
    },
  },
};
</script>

<style scoped lang="less">
.project-push {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  .center-btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.center-btn-right{
  margin: 20px 0;
  text-align: right;
}

.push-top {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  height: 98px;
  align-items: center;

  .top-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: bold;
    border-radius: 10px;

    .num {
      font-size: 28px;
      padding: 0 5px;
      font-weight: bold;
    }

    .left {
      margin-right: 15px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 100%;
      }
    }
  }
}

.table-content {
  //position: relative;
  width: 100%;

  .status {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin: auto;
  }
}

.right-tip {
  display: flex;
  align-items: center;
  height: 70px;
  position: absolute;
  right: 0;

  .right-tip-items {
    display: flex;
    align-items: center;

    .item {
      margin: 0 10px;
      display: flex;
      align-items: center;
    }

    .circle {
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 5px;
      margin-right: 5px;
    }
  }
}

.dialog-body {
  width: 710px;
  height: 205px;
  background: rgba(232, 243, 255, 0.5);
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;

  /deep/ .el-checkbox {
    min-width: 150px;
    margin-right: 0;
    height: 32px;
  }
}

.tixing {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  margin: auto;
}
</style>